<template>
  <view class="main">
    <view class="menu_list">
      <view class="menu_item" v-for="(item, index) in menuList" :key="index">
        <view class="item" v-if="index == 0" @click="changeAvatar">
          <view class="title">{{ item.name }}</view>
          <view class="right">
            <image class="avatar_img" :src="item.remark" mode="aspectFill" />
          </view>
        </view>
        <view
          class="item"
          v-if="index != 0"
          :isLink="index == 2 || index == 3 || index == 4"
        >
          <view class="title">{{ item.name }}</view>
          <view class="right">
            <u--textarea
              placeholderClass="placeholderClass"
              autoHeight
              v-if="index == 3"
              v-model="item.remark"
              placeholder="请输入内容"
            ></u--textarea>
            <u--input
              v-else
              v-model="item.remark"
              placeholder="请输入"
              input-align="right"
              :type="index == 3 ? 'textarea' : ''"
              :center="true"
              :readonly="index == 5 || index == 1"
              border="none"
            />
          </view>
        </view>
      </view>
    </view>

    <view class="btn" @click="confirm">确定</view>

    <!-- 完成任务弹窗 -->
    <pointsTips
      v-if="showPointsTips"
      :title="pointsObj.name"
      :points="pointsObj.amount"
    ></pointsTips>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../pages/my/homePage/edit"
></script>
<style lang="scss" scoped>

.main {
  min-height: 100vh;
  position: relative;
  background-color: #fff;
}

.menu_item {
  &:not(:last-child) {
    border-bottom: 1rpx solid #f6f6f6;
  }
}

.avatar_img {
  width: 62rpx;
  height: 62rpx;
  border-radius: 50%;
}

.btn {
  width: 686rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  color: #fff;
  background: #1c87f3;
  border-radius: 44rpx;
  margin: 0 auto;
  margin-top: 100rpx;
}

/deep/.u-textarea {
  border: none;
  padding-right: 0;
}

/deep/.placeholderClass {
  text-align: right;
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  min-height: 120rpx;

  &:not(:last-child) {
    border-bottom: 1rpx solid #f6f6f6;
  }

  .title {
    width: 150rpx;
  }

  .right {
    width: calc(100% - 180rpx);
    display: flex;
    justify-content: flex-end;
  }
}

/deep/.uni-textarea-textarea {
  text-align: right;
}

/deep/ .uni-textarea-placeholder {
  text-align: end;
}
</style>
